// 自定义聚合功能
import './member.less';
import store from '../../store';
import { reqStatistics } from "@api/apiDatav.js";
import router from "../../router/index";
import { jsonp } from 'vue-jsonp' //使用jsonp

// 展示所有的定位坐标点
class Member {
    map; //地图实例
    markerCluster; //点聚合实例
    infoWindow; // 信息窗口
    marker; //点标记图层
    markerLayer; // 点标记样式
    memberList = []; //所有点
    labelMmr; // 文本标记
    orginit; //判断单位还是建筑物

    showUnit; //true显示单位; false显示建筑物


    // 下面三个好像没有用到
    detailUserId; // 跳转页面需要传递的userId
    markerUserId; // 点击marker点获取的userId，用来查询轨迹
    alarmId; // 告警id，传到地图页面进行告警处理

    constructor(map, memberList, init, callback) {
        // 以下代码为基于DOMOverlay实现聚合点气泡
        function ClusterBubble(options) {
            TMap.DOMOverlay.call(this, options);
        }

        ClusterBubble.prototype = new TMap.DOMOverlay();

        ClusterBubble.prototype.onInit = function(options) {
            this.content = options.content;
            this.position = options.position;
        };

        // 销毁时需要删除监听器
        ClusterBubble.prototype.onDestroy = function() {
            this.dom.removeEventListener('click', this.onClick);
            this.removeAllListeners();
        };

        ClusterBubble.prototype.onClick = function() {
            this.emit('click');
        };

        // 创建气泡DOM元素
        ClusterBubble.prototype.createDOM = function() {
            var dom = document.createElement('div');
            dom.setAttribute('class', 'clusterbubble') //给dom添加属性
                // dom.classList.add('clusterBubble'); 
            dom.innerText = this.content;
            // 设置css
            dom.style.cssText = [
                // 'width: ' + (40 + parseInt(this.content) * 2) + 'px;',
                // 'height: ' + (40 + parseInt(this.content) * 2) + 'px;',
                // 'line-height: ' + (40 + parseInt(this.content) * 2) + 'px;',
                'width: 60px;',
                'height: 60px;',
                'line-height: 60px;',
                'border-radius: 50%;',
                'color: #fff;',
                'font-weight: 500;',
                'text-align: center;',
                'opacity: 0.88;',
                'background-image: ' + 'linear-gradient(139deg, #4294FF 0%, #295BFF 100%);',
                'box-shadow: ' + '0 1px 3px 0 rgba(0, 0, 0, 0.20);',
                'position: absolute;',
                'top: 0px;',
                'left: 0px;',
                'cursor: pointer;',
                'user-select:none;',
            ].join(' ');

            // 监听点击事件，实现zoomOnClick
            this.onClick = this.onClick.bind(this);
            dom.addEventListener('click', this.onClick);

            return dom;
        };

        ClusterBubble.prototype.updateDOM = function() {
            if (!this.map) {
                return;
            }
            // 经纬度坐标转容器像素坐标
            let pixel = this.map.projectToContainer(this.position);

            // 使文本框中心点对齐经纬度坐标点
            let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
            let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
            this.dom.style.transform = `translate(${left}, ${top})`;

            this.emit('dom_updated');
        };

        window.ClusterBubble = ClusterBubble;

        this.normalMmr = require('/src/assets/images/datav/wugaojing.png'); //建筑物无告警
        this.danwei = require('/src/assets/images/datav/danwei.png'); //单位
        this.map = map;
        this.memberList = memberList.filter(member => member.lat != '') //过滤掉经纬度为空的
        this.callback = callback;
        this.mmrLabel(); // 成员头部的文本标记
        this.orginit = init; //判断单位还是建筑物显示头部文本
        if (store.state.user.tenantId == '1750783572836888577') {
            // 广州信腾番偶区区域描边
            var path = [];
            // 行政区划搜索 用地区码查询描边经纬度
            jsonp(
                    `https://apis.map.qq.com/ws/district/v1/search?key=44FBZ-OVKKP-T23D5-VGHUE-XDXC3-BDF53&keyword=440113&get_polygon=2`, {
                        output: "jsonp",
                    }
                )
                .then((res) => {
                    // console.log(res);
                    // console.log(res.result[0][0].polygon[0]);
                    for (var b = 0; b < res.result[0][0].polygon[0].length; b = b + 2) {
                        path.push(
                            new TMap.LatLng(res.result[0][0].polygon[0][b + 1], res.result[0][0].polygon[0][b])
                        );
                    }
                    // console.log(path);
                    //初始化polygon
                    var polygon = new TMap.MultiPolygon({
                        id: 'polygon-layer', //图层id
                        map: this.map, //设置多边形图层显示到哪个地图实例中
                        //多边形样式
                        styles: {
                            'polygon': new TMap.PolygonStyle({
                                // color: '#000000', //面填充色
                                showBorder: true, // 是否显示拔起面的边线
                                borderColor: "rgba(230,232,96,1)", // 边线颜色
                                borderWidth: 5, // 边线宽度
                            })
                        },
                        //多边形数据
                        geometries: [{
                            'id': 'pl', //该多边形在图层中的唯一标识（删除、更新数据时需要）
                            'styleId': 'polygon', //绑定样式名
                            'paths': path, //多边形轮廓
                        }]
                    });

                })
                .catch((err) => {
                    // console.log(err, "err");
                });
        } else if (store.state.user.tenantId == '1821064521231855617') {
            // 进入大屏默认安徽省地图 销售需求 科芯智能
            // 通过查询地区名字来获得地区码
            // jsonp(
            //         `https://apis.map.qq.com/ws/district/v1/search?key=44FBZ-OVKKP-T23D5-VGHUE-XDXC3-BDF53&keyword=安徽省`, {
            //             output: "jsonp",
            //         }
            //     )
            //     .then((res) => {
            //         console.log(res, '340000');
            //     })
            //     .catch((err) => {});

            // var path = [];
            // 行政区划搜索 用地区码查询描边经纬度
            jsonp(
                    `https://apis.map.qq.com/ws/district/v1/search?key=44FBZ-OVKKP-T23D5-VGHUE-XDXC3-BDF53&keyword=340000&get_polygon=2`, {
                        output: "jsonp",
                    }
                )
                .then((res) => {
                    // console.log(res);
                    // console.log(res.result[0][0].polygon[0]);
                    // for (var b = 0; b < res.result[0][0].polygon[0].length; b = b + 2) {
                    //     path.push(
                    //         new TMap.LatLng(res.result[0][0].polygon[0][b + 1], res.result[0][0].polygon[0][b])
                    //     );
                    // }
                    var polygons = []; // 用于存储所有多边形的路径  
                    for (var polygonIndex = 0; polygonIndex < res.result[0][0].polygon.length; polygonIndex++) {
                        var path = []; // 当前多边形的路径  
                        var polygonPoints = res.result[0][0].polygon[polygonIndex]; // 当前多边形的坐标点数组  
                        // 遍历当前多边形的每个坐标点  
                        for (var b = 0; b < polygonPoints.length; b += 2) {
                            // 注意：这里假设坐标点是以[纬度, 经度]的形式存储的  
                            // 如果你的数据是以[经度, 纬度]的形式，需要调整b和b+1的位置  
                            path.push(new TMap.LatLng(polygonPoints[b + 1], polygonPoints[b]));
                        }
                        // 将当前多边形的路径添加到多边形数组中  
                        polygons.push(path);
                    }
                    // console.log(path);
                    // console.log(polygons);
                    //初始化polygon
                    var polygon = new TMap.MultiPolygon({
                        id: 'polygon-layer', //图层id
                        map: this.map, //设置多边形图层显示到哪个地图实例中
                        //多边形样式
                        styles: {
                            'polygon': new TMap.PolygonStyle({
                                // color: '#000000', //面填充色
                                showBorder: true, // 是否显示拔起面的边线
                                borderColor: "rgba(230,232,96,1)", // 边线颜色
                                borderWidth: 5, // 边线宽度
                            })
                        },
                        //多边形数据
                        geometries: [{
                            'id': 'pl', //该多边形在图层中的唯一标识（删除、更新数据时需要）
                            'styleId': 'polygon', //绑定样式名
                            'paths': polygons, //多边形轮廓
                        }]
                    });

                })
                .catch((err) => {
                    // console.log(err, "err");
                });
        }


        if (init) {
            // 单位操作
            this.locMarkersunit();
        } else {
            // 建筑物操作
            this.locMarkers();
        }

    }

    // 单位创建点聚合实例  
    locMarkersunit() {
        this.markerCluster = new TMap.MarkerCluster({
            id: 'cluster',
            map: this.map,
            enableDefaultStyle: false, // 启用默认样式
            minimumClusterSize: 1, // 形成聚合簇的最小个数
            zoomOnClick: true, // 点击簇时放大至簇内点分离
            gridSize: 60, // 聚合算法的可聚合距离
            averageCenter: false, // 每个聚和簇的中心是否应该是聚类中所有标记的平均值
            maxZoom: 10, // 采用聚合策略的最大缩放级别
            geometries: [], //数据组
        });
        this.setMarkers(true); // 添加点位置信息数据
        this.clusterchanged() // 监听聚合簇变化
        this.infoWindowHandle(); //初始化信息窗口
        // this.setPeopleLable3(this.memberList); //单位文本标记
        return this.markerCluster;
    }

    // 建筑物创建点聚合实例 
    locMarkers() {
        this.markerCluster = new TMap.MarkerCluster({
            id: 'cluster',
            map: this.map,
            enableDefaultStyle: false, // 启用默认样式
            minimumClusterSize: 1, // 形成聚合簇的最小个数
            zoomOnClick: true, // 点击簇时放大至簇内点分离
            gridSize: 60, // 聚合算法的可聚合距离
            averageCenter: false, // 每个聚和簇的中心是否应该是聚类中所有标记的平均值
            maxZoom: 10, // 采用聚合策略的最大缩放级别
            geometries: [], //数据组
        });
        this.setMarkers(); // 添加点位置信息数据
        // this.setPeopleLable(this.memberList); //建筑物头部文本标记
        this.clusterchanged() // 监听聚合簇变化
        this.infoWindowHandle(); //初始化信息窗口
        return this.markerCluster;
    }

    // 切换单位
    async changePjt(memberList, init = false) {
        this.orginit = init; //判断单位还是建筑物显示头部文本
        // flag==true 显示单位  flag==false显示建筑物
        // if (JSON.stringify(memberList) == JSON.stringify(this.memberList)) return; //切换相同的单位会出bug
        this.memberList = memberList.filter(member => member.lat != '')

        // console.log(this.memberList, ' this.memberList');
        await this.closeAll();
        await this.setMarkers(init); // 添加点位置信息数据
    }

    // 点标记样式
    setMarkerStyles() {
        this.markerLayer.setStyles({
            normalMmr: new TMap.MarkerStyle({
                width: 25,
                height: 33,
                anchor: {
                    x: 20,
                    y: 20,
                },
                src: this.normalMmr,
            }),
            danwei: new TMap.MarkerStyle({
                width: 25,
                height: 33,
                anchor: {
                    x: 20,
                    y: 20,
                },
                src: this.danwei,
            }),
        });
    }

    // 点聚合添加点位置
    setMarkers(flag = false) {
        // flag==true 显示单位; flag==false显示建筑物
        this.showUnit = flag;
        let styleId = flag ? 'danwei' : 'normalMmr'
        this.memberList.forEach(item => {
            // 点聚合添加点标记
            this.markerCluster.add([{
                id: item.id, //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                styleId: styleId, //指定样式id

                name: item.name || '', //建筑物名称
                orgName: item.orgName || '', //单位名称
                floorCount: item.floorCount || 0, //楼层数量
                spaceCount: item.spaceCount || 0, //安装点数量
                village: item.village || '', //小区
                username: item.username || '', //责任人
                mobile: item.mobile || '', //责任人手机号
                province: item.province || '', //省
                city: item.city || '', //市
                area: item.area || '', //区
                street: item.street || '', //街道
                alarmId: item.alarmId || '',
                address: `${item.province}${item.city}${item.area}${item.street}`, //地址
                position: new TMap.LatLng(item.lat, item.lng),
                lat: item.lat,
                lng: item.lng,
                isAlarm: item.isAlarm, //告警==1
            }, ]);
        });
        this.clusterchanged()
    }

    // 监听聚合簇变化
    clusterchanged() {
        var clusterBubbleList = [];
        var markerGeometries = [];
        this.marker = null;

        // 监听聚合簇变化
        this.markerCluster.on('cluster_changed', e => {
            this.labelMmr.setGeometries([]); //清空头部文本标记
            // 销毁旧聚合簇生成的覆盖物
            if (clusterBubbleList.length) {
                clusterBubbleList.forEach(function(item) {
                    item.destroy();
                })
                clusterBubbleList = [];
            }
            markerGeometries = [];

            // 根据新的聚合簇数组生成新的覆盖物和点标记图层
            var clusters = this.markerCluster.getClusters();
            // console.log(clusters);
            clusters.forEach(item => {
                // console.log(item);
                if (item.geometries.length > 1) {
                    let clusterBubble = new ClusterBubble({
                        map: this.map,
                        position: item.center,
                        content: item.geometries.length,
                    });
                    clusterBubble.on('click', () => {
                        this.map.fitBounds(item.bounds);
                    });
                    clusterBubbleList.push(clusterBubble);
                } else {
                    let labelColor;

                    labelColor = 'noWarnPeople';
                    markerGeometries.push({
                        position: item.center,
                        // 点击信息窗口需用到的参数
                        id: item.geometries[0].id,
                        name: item.geometries[0].name || '', //建筑物名称
                        orgName: item.geometries[0].orgName || '', //单位名称
                        floorCount: item.geometries[0].floorCount || 0, //楼层数量
                        spaceCount: item.geometries[0].spaceCount || 0, //安装点数量
                        village: item.geometries[0].village || '', //小区
                        username: item.geometries[0].username || '', //责任人
                        mobile: item.geometries[0].mobile || '', //责任人手机号
                        province: item.geometries[0].province || '', //省
                        city: item.geometries[0].city || '', //市
                        area: item.geometries[0].area || '', //区
                        street: item.geometries[0].street || '', //街道
                        alarmId: item.geometries[0].alarmId || '',
                        sex: item.geometries[0].gender == 0 ? '女' : '男',
                        address: `${item.geometries[0].province}${item.geometries[0].city}${item.geometries[0].area}${item.geometries[0].street}`, //地址
                        lat: item.geometries[0].lat,
                        lng: item.geometries[0].lng,
                        isAlarm: item.geometries[0].isAlarm, //告警==1
                        // 添加你需要的图片 URL  
                        icon: '/src/assets/images/datav/danwei.png', // 这里替换成你的图片 URL  
                        // styleId: labelColor, //样式id
                        // content: item.geometries[0].name, //标注文本
                    });
                }
            });
            if (this.orginit) {
                this.setPeopleLable3(markerGeometries); //单位文本标记
            } else {
                this.setPeopleLable4(markerGeometries); //建筑物文本标记
            }
            if (this.marker) {
                // 已创建过点标记图层，直接更新数据
                this.marker.setGeometries(markerGeometries);
            } else {
                // console.log(markerGeometries);
                let memberList = this.memberList
                let showUnit = this.showUnit;
                // 创建点标记图层
                this.marker = new TMap.MultiMarker({
                    map: this.map,
                    id: 'marker',
                    styles: {
                        // 设置样式id=myStyle
                        default: new TMap.MarkerStyle({
                            width: 25,
                            height: 33,
                            anchor: {
                                x: 20,
                                y: 20,
                            },
                            "src": this.showUnit ? require('/src/assets/images/datav/danwei.png') : require('/src/assets/images/datav/wugaojing.png'), //单位||建筑物
                            // src: function(e) {
                            //     console.log(e);
                            //     for (let i = 0; i < memberList.length; i++) {
                            //         let geometry = memberList[i];
                            //         console.log(geometry);
                            //         // 根据告警状态设置不同的图片路径
                            //         if (showUnit) return require('/src/assets/images/datav/danwei.png'); // 需要有对应的图片文件
                            //         if (geometry.isAlarm == 0) {
                            //             return require('/src/assets/images/datav/wugaojing.png'); // 需要有对应的图片文件
                            //         } else if (geometry.isAlarm == 1) {
                            //             return require('/src/assets/images/datav/wugaojing.png'); // 需要有对应的图片文件
                            //         }
                            //     }
                            // }(), // 注意这里的 ()，这样 src 就会立即执行这个函数，从而根据告警状态动态设置 src。
                        }),
                    },
                    geometries: markerGeometries
                });
                this.listerInfo(this.showUnit); //监听标注点击事件
            }
        });
    }

    //监听标注点击事件
    listerInfo(init = false) {
        // 移动地图变爪子
        this.map.on('drag', evt => {
            store.commit('saveCursor', 'grabbing');
        });
        this.map.on('dragend', evt => {
            store.commit('saveCursor', 'grab');
        });

        this.marker.on('click', async evt => {
            // console.log(evt);
            // console.log(evt.geometry.styleId);
            if (init) {
                // console.log(init, '单位点击事件');
                this.callback(evt.geometry, true);
                // this.showUnit.bind(this, this.infoWindow)
                // window.document
                // .getElementById("track")
                // .addEventListener("click", this.showUnit.bind(this, this.infoWindow));
            } else {
                this.callback(evt.geometry, false);
                // console.log(evt.geometry, '建筑物点击事件');
                store.commit('savebuildingsArr', evt.geometry); //存储建筑物详情
                let res = await reqStatistics(evt.geometry.id);
                // console.log(res);
                this.markerUserId = this.detailUserId = evt.geometry.id;
                this.alarmId = evt.geometry.alarmId;
                let markerInfo = this.marker.getGeometryById(evt.geometry.id);
                //设置infoWindow
                this.infoWindow.setPosition(evt.geometry.position); //设置信息窗位置

                // <div class="item">
                //                  <span>安装点数量</span><span class="count">${res.data.row.spaceCount}</span>
                //             </div>
                this.infoWindow.setContent(
                    `<div class="infoWindow" id="datavDetail">  
                        <div class="header">
                            <div class="name"><span>${evt.geometry.name}</span><div class="detail" >建筑物详情<i class="el-icon-d-arrow-right"></i></div></div>
                             <div class="address"><i class="el-icon-location-outline"></i>${evt.geometry.address}</div>
                        </div>
                        <div class="content">
                             <div class="item">
                                 <span>楼层数量</span><span class="count">${res.data.row.floorCount}</span>
                            </div>
                            <div class="item">
                                <span>设备数量</span><span class="count">${res.data.row.deviceCount}</span>
                            </div>
                        </div>
                        <div class='triangle'></div>
                  </div>`
                ); //设置信息窗内容
                this.infoWindow.open(); //打开信息窗
                // window.document
                //     .getElementById('close')
                //     .addEventListener('click', this.onCloseInfo.bind(this, this.infoWindow));
                window.document
                    .getElementById('datavDetail')
                    .addEventListener('click', this.onDatavDetail.bind(this, this.infoWindow));
                // 触屏事件
                window.document
                    .getElementById('datavDetail')
                    .addEventListener('touchstart', this.onDatavDetail.bind(this, this.infoWindow));
            }
        });

        this.marker.on('hover', evt => {
            store.commit('saveCursor', 'grab'); // 鼠标移出恢复
        });
        this.marker.on('mousemove', async evt => {
            if (store.state.cursor != 'pointer') {
                store.commit('saveCursor', 'pointer'); // 鼠标移入变手
            }
            // 单位移入显示单位名称
            // if (init) {
            //     this.setPeopleLable2(evt.geometry, true); //更新头部文本标记
            // }
        });

        // 移出
        // this.marker.on('mouseout', evt => {
        //     // this.infoWindow.close(); //移出隐藏弹窗
        //     // console.log(evt.geometry);
        //     // 单位移出
        //     if (init) {
        //         this.labelMmr.setGeometries([]); //清空头部文本标记
        //     }
        // });
    }

    infoWindowHandle(init = false) {
        //初始化infoWindow
        this.infoWindow = new TMap.InfoWindow({
            map: this.map,
            enableCustom: true,
            position: new TMap.LatLng(39.984104, 116.307503),
            offset: {
                x: -11,
                y: -100
            }, //设置信息窗相对position偏移像素background-image: linear-gradient(to bottom, #23e3ac, #09afe6)
            content: '<div class="infoWindow"></div>',
        });
        this.infoWindow.close(); //初始关闭信息窗关闭

        //监听标注点击事件
        // this.listerInfo(init);
    }
    onCloseInfo() {
        // this.markerUserId = '';
        this.infoWindow.close(); //关闭信息窗关闭
        // window.document.getElementById('close').removeEventListener('click', this.closeInfo)
    }

    onDatavDetail() {
        router.push("/building/details"); //跳转至建筑物详情
        // router.replace("/building/details"); //跳转至建筑物详情
    }

    // 成员头部的文本标记
    mmrLabel() {
        let _this = this;
        _this.labelMmr = new TMap.MultiLabel({
            id: 'label-mmr',
            map: _this.map, //设置折线图层显示到哪个地图实例中
            //文字标记样式
            styles: {
                noWarnPeople: new TMap.LabelStyle({
                    color: '#092560', //颜色属性
                    backgroundColor: '#09E2F8',
                    borderColor: '#FFF',
                    borderRadius: 5,
                    borderWidth: 1,
                    padding: '4px 25px',
                    size: 13, //文字大小属性
                    offset: {
                        x: -6,
                        y: -38
                    }, //文字偏移属性单位为像素
                    angle: 0, //文字旋转属性
                    alignment: 'center', //文字水平对齐属性
                    verticalAlignment: 'middle', //文字垂直对齐属性
                }),
                buildingsPeople: new TMap.LabelStyle({
                    color: '#092560', //颜色属性
                    backgroundColor: '#7FBEFF',
                    borderColor: '#FFF',
                    borderRadius: 5,
                    borderWidth: 1,
                    padding: '4px 25px',
                    size: 13, //文字大小属性
                    offset: {
                        x: -6,
                        y: -38
                    }, //文字偏移属性单位为像素
                    angle: 0, //文字旋转属性
                    alignment: 'center', //文字水平对齐属性
                    verticalAlignment: 'middle', //文字垂直对齐属性
                }),
            },
            //文字标记数据
            geometries: [],
        });
        // this.setPeopleLable(this.memberList);
    }

    // 建筑物更新文本标记
    setPeopleLable(labelData) {
        // console.log(labelData, 'labelData头部文本标记');
        let _this = this;
        let centerCoords = [];
        if (
            (_this.labelMmr &&
                _this.labelMmr.getGeometries() &&
                _this.labelMmr.getGeometries().length) ||
            ''
        ) {
            _this.labelMmr.setGeometries([]);
        }
        labelData.forEach((item, index) => {
            let labelColor;
            labelColor = 'buildingsPeople';
            centerCoords.push({
                id: item.id,
                styleId: labelColor,
                position: new TMap.LatLng(item.lat, item.lng),
                content: item.name
            });
            if (index == labelData.length - 1) {
                _this.labelMmr.updateGeometries(centerCoords);
            }

        });
    }

    // 单位文本标记
    setPeopleLable2(labelData) {
        // console.log(labelData, 'labelData头部文本标记');
        let _this = this;
        let centerCoords = [];
        if (
            (_this.labelMmr &&
                _this.labelMmr.getGeometries() &&
                _this.labelMmr.getGeometries().length) ||
            ''
        ) {
            _this.labelMmr.setGeometries([]);
        }

        let labelColor;
        labelColor = 'noWarnPeople';
        centerCoords.push({
            id: labelData.id,
            styleId: labelColor,
            position: new TMap.LatLng(labelData.position.lat, labelData.position.lng),
            content: labelData.orgName
        });
        _this.labelMmr.updateGeometries(centerCoords);
    }

    // 单位文本标记
    setPeopleLable3(labelData) {
        // console.log(labelData, 'labelData头部文本标记');
        let _this = this;
        let centerCoords = [];
        // if (
        //     (_this.labelMmr &&
        //         _this.labelMmr.getGeometries() &&
        //         _this.labelMmr.getGeometries().length) ||
        //     ''
        // ) {
        //     _this.labelMmr.setGeometries([]);
        // }
        // _this.labelMmr.setGeometries([]);
        labelData.forEach((item, index) => {
            let labelColor;
            labelColor = 'noWarnPeople';
            centerCoords.push({
                id: item.id,
                styleId: labelColor,
                position: new TMap.LatLng(item.lat, item.lng),
                content: item.orgName
            });
            if (index == labelData.length - 1) {
                _this.labelMmr.updateGeometries(centerCoords);
            }
        });
    }

    // 建筑物文本标记
    setPeopleLable4(labelData) {
        // console.log(labelData, 'labelData头部文本标记');
        let _this = this;
        let centerCoords = [];
        labelData.forEach((item, index) => {
            let labelColor;
            labelColor = 'buildingsPeople';
            centerCoords.push({
                id: item.id,
                styleId: labelColor,
                position: new TMap.LatLng(item.lat, item.lng),
                content: item.name
            });
            if (index == labelData.length - 1) {
                _this.labelMmr.updateGeometries(centerCoords);
            }
        });
    }

    closeAll() {
        this.labelMmr.setGeometries([]); //清空头部文本标记
        this.infoWindow.close(); //初始关闭信息窗关闭


        if (this.marker == null) return;
        this.marker.setGeometries([]) //清空点标记
        this.marker.destroy() //清空点标记
        this.markerCluster.setGeometries([]); //清空点标记

        // 清空点标记 删除dom元素 气泡
        let doms = document.getElementsByClassName('clusterbubble')
        let l = doms.length
        for (let i = l - 1; i >= 0; i--) {
            if (doms[i] != null) {
                doms[i].remove();
            }
        }

        // this.markerCluster.setMap(null); //清空点标记
        // this.markerCluster.destroy(); //清空点标记
    }

    memberFilter(arr) {
        arr.forEach(item => {
            this.memberList.push(new TMap.LatLng(item.lat, item.lon));
        });
    }

}

export default Member;